<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>推薦店家</title>

<link rel="stylesheet" href="../css/sunny/fontsize0.9/jquery-ui-1.10.4.custom.css">

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.tinyMap-2.5.6.js"></script>

<style>
.divclass {
	margin:0px 0px 10px 23px;
	padding:0px;
	width:718px;
	border-radius:25px;
}

.divclass table{
    border-collapse: collapse;
     border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	border-radius:25px;
}

.divclass tr td{
	vertical-align:middle;
	text-align:center;
	padding:10px;
	background-color:#ff7f00;
	border:0px solid #000000;
	text-align:center;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
	width:194px;
	border-radius:25px;
	box-shadow: 10px 10px 5px #888888;
}

.orange tr td{
	background: rgb(239,162,67); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(239,162,67,1) 0%, rgba(196,128,86,1) 50%, rgba(189,94,0,1) 51%, rgba(239,201,143,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,162,67,1)), color-stop(50%,rgba(196,128,86,1)), color-stop(51%,rgba(189,94,0,1)), color-stop(100%,rgba(239,201,143,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efa243', endColorstr='#efc98f',GradientType=0 ); /* IE6-9 */

	}

.green tr td{
background: rgb(80,198,86); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(80,198,86,1) 0%, rgba(77,120,72,1) 50%, rgba(32,98,33,1) 51%, rgba(99,205,126,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,198,86,1)), color-stop(50%,rgba(77,120,72,1)), color-stop(51%,rgba(32,98,33,1)), color-stop(100%,rgba(99,205,126,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50c656', endColorstr='#63cd7e',GradientType=0 ); /* IE6-9 */

}

.blue tr td{
background: rgb(80,135,198); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(80,135,198,1) 0%, rgba(72,102,120,1) 50%, rgba(32,65,98,1) 51%, rgba(99,127,205,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,135,198,1)), color-stop(50%,rgba(72,102,120,1)), color-stop(51%,rgba(32,65,98,1)), color-stop(100%,rgba(99,127,205,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5087c6', endColorstr='#637fcd',GradientType=0 ); /* IE6-9 */

}

.map {
	border-radius:25px;
	color: black; 
	display:inline-block; 
	width: 300px; 
	height: 300px
}

.gototop {
position:fixed; 
bottom:0px; 
right:0px; 
z-index:2;
opacity: 0.3;
filter: alpha(opacity = 30);
}

.orangeBackground {
background: rgb(239,162,67); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(239,162,67,1) 0%, rgba(196,128,86,1) 50%, rgba(189,94,0,1) 51%, rgba(239,201,143,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,162,67,1)), color-stop(50%,rgba(196,128,86,1)), color-stop(51%,rgba(189,94,0,1)), color-stop(100%,rgba(239,201,143,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(239,162,67,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(239,201,143,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efa243', endColorstr='#efc98f',GradientType=0 ); /* IE6-9 */
}

.orangeBackground:hover {
background: rgb(255,207,153); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,207,153,1) 0%, rgba(196,128,86,1) 50%, rgba(189,94,0,1) 51%, rgba(255,238,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,207,153,1)), color-stop(50%,rgba(196,128,86,1)), color-stop(51%,rgba(189,94,0,1)), color-stop(100%,rgba(255,238,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,207,153,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(255,238,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,207,153,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(255,238,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,207,153,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(255,238,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,207,153,1) 0%,rgba(196,128,86,1) 50%,rgba(189,94,0,1) 51%,rgba(255,238,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcf99', endColorstr='#ffeebf',GradientType=0 ); /* IE6-9 */
}

.blueBackground {
background: rgb(80,135,198); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(80,135,198,1) 0%, rgba(72,102,120,1) 50%, rgba(32,65,98,1) 51%, rgba(99,127,205,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,135,198,1)), color-stop(50%,rgba(72,102,120,1)), color-stop(51%,rgba(32,65,98,1)), color-stop(100%,rgba(99,127,205,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(80,135,198,1) 0%,rgba(72,102,120,1) 50%,rgba(32,65,98,1) 51%,rgba(99,127,205,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5087c6', endColorstr='#637fcd',GradientType=0 ); /* IE6-9 */
}

.blueBackground:hover {
background: rgb(153,201,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(153,201,255,1) 0%, rgba(86,154,196,1) 50%, rgba(0,95,190,1) 51%, rgba(191,208,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,201,255,1)), color-stop(50%,rgba(86,154,196,1)), color-stop(51%,rgba(0,95,190,1)), color-stop(100%,rgba(191,208,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(153,201,255,1) 0%,rgba(86,154,196,1) 50%,rgba(0,95,190,1) 51%,rgba(191,208,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(153,201,255,1) 0%,rgba(86,154,196,1) 50%,rgba(0,95,190,1) 51%,rgba(191,208,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(153,201,255,1) 0%,rgba(86,154,196,1) 50%,rgba(0,95,190,1) 51%,rgba(191,208,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(153,201,255,1) 0%,rgba(86,154,196,1) 50%,rgba(0,95,190,1) 51%,rgba(191,208,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99c9ff', endColorstr='#bfd0ff',GradientType=0 ); /* IE6-9 */
}

.greenBackground {
background: rgb(80,198,86); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(80,198,86,1) 0%, rgba(77,120,72,1) 50%, rgba(32,98,33,1) 51%, rgba(99,205,126,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,198,86,1)), color-stop(50%,rgba(77,120,72,1)), color-stop(51%,rgba(32,98,33,1)), color-stop(100%,rgba(99,205,126,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(80,198,86,1) 0%,rgba(77,120,72,1) 50%,rgba(32,98,33,1) 51%,rgba(99,205,126,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50c656', endColorstr='#63cd7e',GradientType=0 ); /* IE6-9 */
}

.greenBackground:hover {
background: rgb(153,255,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(153,255,158,1) 0%, rgba(97,196,86,1) 50%, rgba(0,190,3,1) 51%, rgba(191,255,207,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(153,255,158,1)), color-stop(50%,rgba(97,196,86,1)), color-stop(51%,rgba(0,190,3,1)), color-stop(100%,rgba(191,255,207,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(153,255,158,1) 0%,rgba(97,196,86,1) 50%,rgba(0,190,3,1) 51%,rgba(191,255,207,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(153,255,158,1) 0%,rgba(97,196,86,1) 50%,rgba(0,190,3,1) 51%,rgba(191,255,207,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(153,255,158,1) 0%,rgba(97,196,86,1) 50%,rgba(0,190,3,1) 51%,rgba(191,255,207,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(153,255,158,1) 0%,rgba(97,196,86,1) 50%,rgba(0,190,3,1) 51%,rgba(191,255,207,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ff9e', endColorstr='#bfffcf',GradientType=0 ); /* IE6-9 */
}

</style>



<script>

$(function() {
	$(document).tooltip();
	$(".buttonClass").button().css({
			"margin":"0px 20px 0px 20px",
	      "font-size":"24px",
	      "box-shadow" : "5px 5px 10px #888888",
	      "color" : "white",
	      "border" : "none",
	      "border-radius" : "25px",
	    });
	$(".buttonOrange").addClass("orangeBackground");
	$(".buttonBlue").addClass("blueBackground");
	$(".buttonGreen").addClass("greenBackground");
	
var storeaddress = ["台北市大安區復興南路一段390號4樓", "新北市三重區大仁街116號","台北市大安區基隆路2段112號1樓","台北市信義區信義路六段81號1樓"];
var storetitle = ["家格建設股份有限公司", "凱撒Caesar寵物自助澡堂","愛貓園寵物店","肥貓寵物用品店"];
var i= storeaddress.length - 1;

$("body").append("<h1 id='storepart' style='text-align:center;'>寵物用品店</h1>");
	for(var count=0;count<=i;count++)
	{
		$("body").append("<div class='divclass orange'><table><tr><td>"
				+storetitle[count]+"</td><td>"+storeaddress[count]+"</td><td><div class='map"+count+" map'></div>"+
				"</td></tr></table></div>");
	}
	
	
	for(var count=0;count<=i;count++)
	{	
		var string = ".map" + count;
		
		$(string).tinyMap({
		center: storeaddress[count],
		marker: [{addr: storeaddress[count],
			 text: storeaddress[count],
			 label: storetitle[count]}],
    	zoom: 16
		});
	}
	
	
	
	var restaurantaddress = ["台北市大安區大安路一段83巷7號", "台北市大安區仁愛路四段345巷5弄15號","台北市大安區敦化南路一段190巷29號5樓","台北市大安區安和路一段65號"];
	var restauranttitle = ["貓咪先生的朋友", "zoo cafe 動物園野餐咖啡","屋頂上的貓私廚","安和65"];
	var i= restaurantaddress.length - 1;
		
		$("body").append("<br><br>");
		$("body").append("<h1 id='restaurantpart' style='text-align:center;'>寵物餐廳</h1>");
		for(var count=0;count<=i;count++)
		{
			$("body").append("<div class='divclass green'><table><tr><td>"
					+restauranttitle[count]+"</td><td>"+restaurantaddress[count]+"</td><td><div class='map"+count+" map'></div>"+
					"</td></tr></table></div>");
		}
		
		
		for(var count=0;count<=i;count++)
		{	
			var string = ".map" + count;
			
			$(string).tinyMap({
			center: restaurantaddress[count],
			marker: [{addr: restaurantaddress[count],
				 text: restaurantaddress[count],
				 label: restauranttitle[count]}],
	    	zoom: 16
			});
		}
		
	
	
		var hospitaladdress = ["八里區中山路2段261號3樓", "八里區中山路二段421號1樓","三重區力行路2段145號","三重區三和路4段266號1樓"];
		var hospitaltitle = ["貝貝家畜醫院", "麗園動物醫院八里分院","家麒獸醫院","來旺旺動物醫院"];
		var i= hospitaladdress.length - 1;
			
			$("body").append("<br><br>");
			$("body").append("<h1 id='hospitalpart' style='text-align:center;'>寵物醫院</h1>");
			for(var count=0;count<=i;count++)
			{
				$("body").append("<div class='divclass blue'><table><tr><td>"
						+hospitaltitle[count]+"</td><td>"+hospitaladdress[count]+"</td><td><div class='map"+count+" map'>"+
						"</td></tr></table></div>");
			}
			
			
			for(var count=0;count<=i;count++)
			{	
				var string = ".map" + count;
				
				$(string).tinyMap({
				center: hospitaladdress[count],
				marker: [{addr: hospitaladdress[count],
					 text: hospitaladdress[count],
					 label: hospitaltitle[count]}],
		    	zoom: 16
				});
			}
			
});




</script>

</head>

<body>

<div style="text-align:center;">
<a href="#storepart" class="buttonClass buttonOrange">寵物用品店</a>
<a href="#restaurantpart" class="buttonClass buttonGreen">寵物餐廳</a>
<a href="#hospitalpart" class="buttonClass buttonBlue">寵物醫院</a>
</div>
<a href="#" class="gototop" title="回到頂端"><img src="../images/post-arrow-up.png"></a>

<!-- 
<div class="CSSTableGenerator" >
                <table >

                    <tr>
                        <td >
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                        <td>
                            Row 1
                        </td>
                    </tr>
                
                </table>
</div>
  -->           
 
 
</body>

</html>